<template>
<div class="banner-main">
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <div>首页轮播共: {{bannerimg.length}} 张</div>
      <div class="btns" style="margin-left: 65%">
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="addImg">新增</el-button>
        <el-button type="warning" icon="el-icon-magic-stick" circle></el-button>
        <el-button type="danger" icon="el-icon-delete" @click="delImg" circle></el-button>
      </div>
    </div>
    <div >
<!--      轮播图-->
      <el-carousel :interval="4000" @change="getIndex" type="card" height="200px">
        <el-carousel-item v-for="item in bannerimg" :key="item.id">
          <img :src="item.img_url" alt="" style="width: 100%;height: 100%;">
        </el-carousel-item>
      </el-carousel>
    </div>
    <el-row :gutter="10">
     <el-col :span="6">
       当前显示: 第 {{activeIndex}} 张
     </el-col>
    </el-row>
  </el-card>
  <el-dialog
    title="添加图片"
    :visible.sync="dialogVisible"
    width="40%"
    >
   <el-row :gutter="10">
    <el-col :span="6" :offset="1">
      <el-upload
        class="upload-demo"
        drag
        :action="urls"
        :on-success="imgsucess"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-col>
     <el-col :span="5" :offset="8">
       <img style="width: 200px; height: 200px;" :src="imgshow" alt="">
     </el-col>
   </el-row>
    <el-row :gutter="10" style="margin-top: 10px">
     <el-col :span="6">
       排序:
       <el-input-number size="small" v-model="sort" :min="1" :max="15" label="label"></el-input-number>
     </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</div>

</template>

<script>
import urls from '@/settings'
import bannerApi from "@/api/product/banner";
export default {
name: "banner",
data(){
return{
  urls:urls.imgUrl,
  bannerimg:[],
  activeIndex:1,
  dialogVisible:false,
  imgshow:"",
  sort:1
}

},
methods:{
getList(){
  bannerApi.getBannerList({
    use:0
  })
  .then(res=>{
    console.log(res)
    this.bannerimg = res.data;
  })
},
  // 展示轮播的路径
  getIndex(val){
    this.activeIndex = val+1
    console.log(val)

  },
  //添加图片
  addImg(){
this.dialogVisible = true;
  },
  //上传图片
  imgsucess(val){
    console.log(val)
    var urls = val.ossUrl;
    this.imgshow = urls
  },
  //提交
  submit(){
    bannerApi.AddBanner({
      img_url:this.imgshow,
      sort:this.sort,
      use:0
    })
    .then(res=>{
      console.log(res)
      if (res.code == 'S'){
        this.$message.success('添加成功!!!')
        this.dialogVisible = false;
        this.getList()
      }
    })
  },
  //删除图片
  delImg(){
    this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      bannerApi.delBanner({
        id:this.bannerimg[this.activeIndex-1].id
      })
        .then(res=>{
          if (res.code == 'S'){
            this.$message({
              type: 'error',
              message: '删除成功!'
            });
            this.getList()

          }


        })


    })


  }
},
  created(){
    this.getList()

  }
}
</script>

<style lang="scss" scoped>
.banner-main{
.box-card{
  width: 55%;
  margin: 100px auto;
  .clearfix{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
}
</style>
